Top Ten Open Source Tools for Web Developers

Web apps load like regular Web pages or websites. Their functionalities include working offline, push notifications, and device hardware access that was traditionally available only to native mobile apps. Web development plays an important role in the Internet ecosystem.

Let us kick off this discussion on the best open source tools for Web developers with a closer look at Git.

Git

Most developers use the Git repository for version control. The Git server helps to manage multiple repositories (when many people work in the same repository but on different tasks), to keep track of changes in the code.

Now, let’s understand Git’s workflow, branching strategy and commands. When working in a team, there are some very important things that everyone should know about Git. These include the following.

The workflow of Git

Git uses the same centralised pattern as a subversion (SVN) workflow but the developer is empowered by its ease of use, compared to SVN. All developers have their own local copy of the entire project while each one works independently, oblivious of all other changes to the project. Developers can add commits to their own local branch and completely ignore the main development/master branch until convenient; i.e., when a bug is fixed or a feature is complete.

In Figure 1, the third stage is the developer’s local branch. The Git Terminal is recommended for use although Git GUI is available. The latter might be easier but the developer community finds the terminal more convenient. In Git Terminal, the command line serves to inform the user and give proper error messages; and when the command fails, it also points out the proper solution.

Commands in Git

To create a working directory, use the following command:

ssh user@host git init --bare /path/to/repo.git

To clone the central repository, use the command shown below:

git clone https://user@host/path/to/repo.git OR git clone ssh://user@host/path/to/repo.git

The following command is used to create a local branch and checkout:

git checkout –b <your branch name>

How to make a change and commit: Once a repository is cloned in the local machine, then the developer can make changes using the standard Git commit process — to edit, stage and commit. If the developer is not familiar with staging, then the other way to prepare a commit without having to include more changes in the working directory is as follows:

git status # View the state of the repo

git add <some-file with give proper path> # Stage a file

git commit –m “Give Proper message” # this is the local commit in your local branch

git push origin <your local branch name>

Pushing a new commit in the central repository: Once the local repository has new changes committed, these should be pushed to share with other developers in the project, by using the following command:

git pull origin development branch

Git merge development: If you encounter a merge issue, open your merge tool, solve all conflicting merge issues and then repeat the following command:

git status

git add <files with proper path>

git commit –m “give proper message”

git push origin <your local branch>

git checkout development

git merge <local branch name>

git commit –m “give proper message”

git push origin development

Best practices for Git

Let’s look at some of the best practices of Git, based on experience.

• Use a proper branching strategy and pull request: It is a good practice to take a pull from the main repository before pushing code changes into it. This can save many hours that would otherwise be wasted on conflict resolution. This consists of just two basic steps.

1. First, for every new feature, start a new branch based on that feature. Do not touch the master branch as you continue development.
2. Once the development branch is stable, create a pull request. If you’re working with others, this allows them to review your changes. When all issues are settled, merge the code into the repository.

• Do backup: Backing up saves lives! Repeat those words over and over again! It is important to take backups of Git also. It is critical to perform this exercise frequently. Git Clone is also a kind of backup.
• Use meaningful commit messages: When code is committed, a proper commit message must be sent. That is one of the easiest, most useful things you can do as a developer of that code so that people can easily understand what changes you have made in the code without having to read or debug it. Even when you check the history, you will understand the changes in the code because of good commit messages. Hence, commit messages play a very important role.
• Always review code before committing: It’s common for basic Git introductory tutorials to suggest always committing code with the Git commit -m without accurately explaining what the command does. By using the commit command as in other legacy VCS (version control system), one of the most useful features of Git is ignored. Git has introduced a new feature to the VCS called the ‘staging area’. It sounds complicated, but it is actually a very simple tool. As per this command, the index is a place to indicate what exactly to include in the next commit. Before using the commit command, first use the Git status command so that you know all the changes in your code. Try to avoid merging commits whenever possible. Merge conflicts could happen in rare cases when two developers write code on the same line.
• Don’t commit half-done work: Please do not commit half-baked code. Once your work is complete, first commit your code in your local branch and then push it to your development/master branch. But that doesn’t mean you have to complete the entire functionality of a large feature before committing. You can split the implementation of your large feature into logical parts and remember to commit early and often. Commit each small logical part, one at a time, in your local branch, and once the entire functionality is achieved, commit and push the code to the development/master branch. Do not commit just to have something in your local repository before leaving the office at the end of the day. If you’re tempted to commit just because you need a clean work slate, use Git’s ‘Stash’ feature instead.

Bootstrap

Bootstrap is one of the most popular open source HTML, CSS and JS front-end frameworks. Its latest available version is 4.2.1. In Bootstrap, a 12-grid responsive layout is available, apart from 13 jQuery plugins, SCSS (which is common for UI-like carousals), pop-ups, modals, and other customised Bootstrap classes. Bootstrap is easy to learn and is used for creating responsive websites.

How to install and use Bootstrap

There are two methods to install Bootstrap in your project.

• Bootstrap package installation using npm requires you to use the following code to install the latest version of Bootstrap:

npm install bootstrap //

…or to use the following code to install a specific version of Bootstrap:

npm install bootstrap –v 4.2.1

• The CDN method: When you are using only CSS and JS, you can use this method.
• For CSS, add the CDN link in your head section, as follows:

<link rel=”stylesheet” ef=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”

integrity=”sha384-MCw98/ SFnGE8fJT3GXwEOngs 7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=”anonymous”>

• For JS, Proper.js and jQuery, use the following code:

<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”integrity=”sha384-

i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5sm

XKp4YfRvH+8abtTE1Pi6jizo”crossorigin=”anonymous”>

</script>

<script

src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”integrity=”sha384-ZMP7rVo3mIykV+2 +9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49”crossorigin=”anonymous”>

</script>

<script

src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”integrity=”sha384-Chfqqxu

ZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy”crossorigin=”anonymous”>

</script>

If you don’t have much knowledge about HTML, CSS, JavaScript or jQuery, there’s no need to worry because the Bootstrap framework is easy to learn and use.

New features in the latest version of Bootstrap

There are some new features in the Bootstrap beta version. This version includes some stabilised CSS, a Media Query style and an updated new grid style.

• The giant move to Flexbox: In Bootstrap v4, Flexbox is enabled with many new, awesome features such as the Flexbox based grid, vertical centring, auto-layout grid, floats, auto margin, responsive sizing and new spacing utilities. Flexbox also powers the new card components.
• Updated grid system: Bootstrap v4 has been made to take the five-grid tier system, which includes xs, sm, md, lg and xl.

The new grid tier, xl, increases the media query range all the way down to 544px.

The improved grid system offers the following:

• Support for Flexbox in the grid mixin and predefined classes.
• Support for horizontal and vertical alignment classes.
• Change in media queries to avoid repeating a query declaration. For example:

@include media-breakpoint-up(sm) {}

@include media-breakpoint-down(sm) {}

@include media-breakpoint-only(sm) {}

• Changed grid mixins from make-col-span to make-col for a singular mixin.
• Browser support changes: Bootstrap v4 supports IE10+, the Android v5.0 Lollipop browser and Webview, as well as iOS 7+. But it has dropped the support of IE8, IE9 and iOS 6. If we want to have support for older versions of these browsers, we must use Bootstrap v3.
• Media queries on steroids: In Bootstrap v4, @screen no longer exists. We can now write the media queries very easily, as shown in the following example:

In CSS (Old bootstrap version):

// Extra small devices (portrait phones, less than 576px)

// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }

In the new version of Bootstrap, media queries such as media-breakpoint-up(), media-breakpoint-down(), media-breakpoint-between, or media-breakpoint-only() can be used as shown below:

@media (min-width: 576px) and (max-width: 767.98px) { ... } can be used as @include media-breakpoint-only(sm) { ... }.

@media (min-width: 1200px) { ... } can be used as @include media-breakpoint-only(xl) { ... }.

@media (max-width: 575.98px) { ... } can be used as @include media-breakpoint-down(xs) { ... }.

@media (min-width: 576px) { ... } can be used as @include media-breakpoint-up(xs) { ... }.

There are many more changes in Bootstrap v4 as described below.

• Modified form classes based on layout. For example: .control-label is now .col-form-label; .input-lg and .input-sm are now .form-control-lg and .form-control-sm, respectively; .form-group-* classes are now .form-control-* classes; .help-block is now .form-text for block-level help text, etc. Utility classes like .text-muted can be used for inline help text, with no more of .radio-inline and .checkbox-inline, etc.
• Modified new card components with the Flexbox feature. As per the functionality for thumbnails, panels and wells are available as modifier classes for cards. For example: class=”card-body” which is the building block; class=”card-header” which gives you a header within a card; class=”card-footer” which gives you a footer within a card; class=”card-info”, class=”card-inverse”, class=”card-warning”, class=”card-danger” and class=”card-success”.
• Spacing utilities, tooltip auto-placement support and the global font-size has been increased from 14px to 16px.
• The primary CSS unit is now rem rather than px. However, pixels are widely used for media queries.
• In Bootstrap v4, the Glyphicons font has been dropped. Suggested options are fontAwesome and Octions.

Angular

Angular is the right choice for creating a single page application. It helps to publish the Web component that is used in HTML pages. The latest version is Angular v6. In this version, the new features available include the component development kit, Angular CLI and an Angular Material Package update. In Angular, we use the Typescript language, which is the superset of JavaScript .

Installing Angular 6

Before installing Angular, we first need to check that Node.js is present in the machine. If so, then check which version it is, as well as the NPM version by using the following command:

node –v and npm –v

After that, execute the following command to install Angular:

npm install –g @angular/cli

Check the Angular version by using the command:

ng ---version

To create a new Angular project, use the following command:

ng new my-first-app

Go to the my-first-app folder and run the ng serve command.

The basic structure of an Angular project

• package.json: This has the list of the node dependencies that are needed.
• src/styles.css: Global CSS is available throughout the application.
• src/main.ts: This is the main file that starts the Angular. The extension .ts stands for TypeScript.
• src/index.html: This is the first file that executes alongside main.ts when the page loads.
• src/app/app.module.ts: This is the file in which all the components, providers and modules are defined. Without defining them here, they can’t be used elsewhere in the code.
• src/app/app.component.html: This is the main component of an Angular app, and all other components are usually present within it.
• src/app/app.component.ts is the logic for this component.
• src/app/app.component.scss is the CSS for this component, which itself does not have important logic, but acts as a container for other components.

Why use Angular 6?

Some important reasons for using Angular are listed below.

• Typescript 2.7+ support: Since Angular v6 uses the latest version of Typescript, it is much easier to write code with the conditional type declaration, strict class initialisation and default declaration.
• Elements: Creating widgets or components which can include any existing page, was not a simple task in previous versions of Angular. Elements enable the creation of components, which will be published as Web components and can be used in any HTML page.
• Service worker support: In Angular, service workers are the scripts that run in the browser and manage the app cache. The latest version of Angular supports the navigation URL within the service worker, always remains in the current state (unless the server is reconnected) and updates the work.
• i18n: This is the important change in Angular 6, specially used for international languages. In i18n, with the help of pipe functionality, we can change the currency value with two digits. The i18n function is getNumberOfCurrencyDigits(). Some others are formatNumber, formatCurrency, formatPercent and formatDate.

There are many other important changes in Angular 6 such as the latest RxJS 6.0, tree shaking, the Bazel compiler, ngModalChange, etc.

ReactJS/ReactNative

ReactJS is a JavaScript library that supports both the front-end and the server for the user interface and Web applications. React Native is a JavaScript mobile framework, which is used to compile native app components for mobile application development; it has support for different platforms (Android and iOS). Both have been open sourced by Facebook.

ReactNative and ReactJS both use ReduxJS. In both, components can be reused to save time for development. In React, when rendering a page completely from the server to the browser, the SEO of the Web app improves. It also improves the debugging speed, making the developer’s life easier. If you are not familiar with React, don’t worry, since it is easy to understand.

Differences between ReactJS and ReactNative

Some important differences between ReactJS and ReactNative are listed below.

• ReactNative is faster than ReactJS because when the latter is used for a new project, a bundler like Webpack is used to find which bundling module is needed for the project. But ReactNative comes with everything and is easy to set up.
• ReactNative uses native APIs as a connection path to render the components on mobiles. But ReactJS uses Virtual DOM to render the browser code.
• If you have already worked on ReactJS previously, then it is easier for you to work on ReactNative because the latter doesn’t use HTML. ReactNative uses special APIs for standard CSS and animation.

Apache Cordova

Apache Cordova is the latest version of the PhoneGap mobile application development framework. It enables software programmers to build mobile apps with the help of HTML5, CSS3 and JavaScript instead of platform-specific APIs such as Android, iOS or Windows phones. It automatically wraps the CSS, HTML and JavaScript, based on the platform of the device. It is open source software.

Apache Cordova is easy to set up through the command line interface (CLI) with Cordova commands. Cordova supports more native features such as camera, compass, in-app browser, contacts, file upload, notifications, geo-location, storage, etc.

Advantages of Apache Cordova

Listed below are some of the main advantages of Apache Cordova:

• There’s no need to learn a new language in order to use Cordova if you know how to develop Web or mobile applications.
• It works well with jQuery Mobile in rendering.
• There are many more libraries available to work with.
• It automatically manages images for multiple devices with the help of CSS and media queries.
• It is easy to create vector graphics to design specifications.
• It has cross-browser compatibilities.

Disadvantages of Apache Cordova

The disadvantages of Apache Cordova are listed below:

• Some Cordova plugins are not supported on the mobile browser.
• Many devices with varying hardware, network issues and screen sizes don’t support Cordova plugins and features.
• Some features of Cordova, like iScroll, don’t work for all devices, and this impacts the performance.
• Documentation for PhoneGap is much better compared to Cordova.
• Some API functions cause JavaScript errors.
• There are fewer facilities in JavaScript for modularisation of large-scale applications than in Objective-C or Java.

Ionic

Ionic is an open source framework that is used for hybrid application development. It is a developer-friendly framework with high performance. It has a good look and feel on mobile devices. In Ionic, we use HTML, CSS, Sass, SCSS, JavaScript, Apache Cordova as well as Angular, React, Vue or no framework at all. Ionic is backend-agnostic and provides connections with Firebase, AWS and Azure.

Advantages of the Ionic framework

Listed below are the main advantages of the Ionic framework:

• Fast development compared to native Android/iOS apps.
• Easy to debug based on the platform (except from native functionality).
• There’s no need to learn Java or Swift. We can get started with the help of Angular, HTML, CSS and JavaScript.
• UI components are available in Ionic and are easy to use. These include buttons, carousels, toggles, segments, modals, lists and rows/columns.
• Many plugins are used in smartphones, but some of these are native plugins (such as those used for the camera, fingerprint sensing, geolocation and push notifications), which do not work in Web browsers..

The disadvantages

The following list features the disadvantages of the Ionic framework:

• Most of the time, native plugins can be a conflict in Ionic — for instance, between two Google related plugins.
• Sometimes, it is difficult to find out where the error is; an error message can be unclear. There are debugging issues because some of the plugins are only supported on real devices and emulators, and not on browsers and simulators.
• Sometimes the build can break without any reason because of a corrupted original branch. So always commit your folder in your repository branch and when that is done, take a clone and run the build command again.

Visual Studio Code

Visual Studio Code is an open source and free source code editor developed by Microsoft for macOS, Windows and Linux. It is a lightweight editor.

Visual Studio Code enables Git control, debugging, intelligent code completion, syntax highlighting, code refactoring and snippets. It supports a number of programming languages such as C, C#, Java, Dockerfile, Groovy, HTML, CSS, JavaScript, JSON, PowerShell, XML, Ruby, SCSS, and others.

VS Code also integrates with build and scripting tools to perform daily tasks efficiently, making workflow faster. Also, in-build Node.js development with TypeScript and JavaScript is possible. It also provides great tooling for Web technologies such as JSX/React, HTML, CSS, LESS, SASS and JSON.

Customised features are available in VS Code. Depending on your requirements, you can change the VS Code features. Visual Studio is a completely different product from VS Code. Developers use VS Code because it is user friendly, easy to debug, provides project templates, databases and third-party plugins.

Postman

Postman is a Google Chrome app that interacts with HTTP APIs. Postman has a user-friendly GUI for showing requests, as well as accurate responses like the Live API response. Postman is specially used for testing purposes.

Now, let’s look at some good reasons to use Postman.

• Easily creates test suites: Here, we can create a collection of integration tests to check whether an API is working as per expectations. In Postman, tests are always run in a specific manner or in a specific order; each and every test is executed after the previous one is finished. In every test, an HTTP request is made and assertions written in JavaScript are then used to verify the integrity of your code.
• Postman stores information for running tests in different environments. Sometimes we write a test and it works perfectly, even when we run it again and again against our local environment. So Postman allows us to store specific data about the different environments and insert the correct environment configuration into our test, automatically.

Jenkins

Jenkins is an automation server. After Jenkins 2.0, Jenkins is no longer just a CI server. Now, there is dedicated focus on CI as well as CD. Some of its features include the following:

• Role based access to users depending on build jobs, folders, pipelines, configurations and actions.
• Integration with Active Directory, LDAP and with the internal database.
• More than 1500 plugins to integrate Jenkins with many open source and commercial tools (refer to https://plugins.jenkins.io/).

1. Platform for iOS, .NET, Android and Ruby development.
2. User interface (listview-column plugins).
3. For administration purposes Jenkins has agent controllers, page decorators, users and security, cluster management, CLI extensions, etc.
4. Source code management (SCM connections, SCM related).
5. Build management (build triggers, wrappers, tools, reports, parameters and notifiers; deployment plugins, clean-up actions and artifact uploaders).

• Master agent architecture to manage Jenkins effectively.
• Build pipeline plugins to orchestrate different activities in application life cycle management.
• Pipeline as code/multibranch pipeline to manage pipelines easily in repositories.

1. Blue Ocean – a new user interface to create pipeline as code in a easier way.
2. A new UI for the Jenkins dashboard that is easy to use.
3. Multiple views supported along with folders to manage jobs in an easier manner.
4. Jenkins installation is supported for Docker, FreeBSD, Gentoo, MacOS X, OpenBSD, openSUSE, Red Hat, Fedora, CentOS, Ubuntu/Debian, Windows, and generic Java packages (.war).

Jenkins has more than 155,000 active installations and approximately 1.5 million users. It is a multiple-award-winning open source project.

Slack

Slack has become one of the most popular collaboration tools in recent times. It has a free version, a standard version (US$ 6.67 per active user, per month billed annually; or US$ 8 billed monthly), and the Plus version (US$ 12.50 per active user, per month billed annually; or US$ 15 billed monthly). It comes with a vast array of compliance certifications and regulations, two of which are:

• FedRAMP (Li-SaaS) Federal Risk and Authorisation Management Program
• NIST 800-171 – Protecting Controlled Unclassified Information in Non-federal Systems and Organisations
• Its features include:
• Online collaboration
• Easy integration with automation tools such as Jenkins. Slack notifications can be configured for successful static code analysis, build, deployment, and so on, as well as for when these tasks/processes fail.
• Workspace is created so that team members communicate and collaborate.
• Multiple roles, which include workspace owners, workspace admins, members and guests.
• Slack has channels where team members do messaging, use tools, and transfer files. Channels are used for team communication and collaboration. These include public channels, private channels and shared channels (beta).

There is a Slack app for Android and iOS devices, a Slack dashboard application for computers, and a Web app to use Slack effectively when on the go.